import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Largeloandet extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prodetail: [],
            tellphone: '',
            code: '',
            second: 0
        }
        this.valids = [
            {
                key: 'tellphone',
                func(str) {
                    if (str.length !== 11) {
                        jquery(".errormsg").html("手机号码格式错误")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                        jquery(".code").css("display", 'block')
                    }
                    return true
                }
            },
            {
                key: 'code',
                func(str) {
                    if (str.length === 0) {
                        jquery(".errormsg").html("验证码不能为空")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                    }
                    return true
                }
            }
        ]
    }

    componentDidMount() {
        this.getdetail()
        this.addCount()
    }

    async getdetail() {
        var id = util.getQuery().id;
        let res = await util.rjax({
            url: '/other/getProduct?id=' + id,
            type: 'get'
        })
        this.setState({
            prodetail: res.data
        })
    }

    async addCount() {
        var id = util.getQuery().id;
        let res = await util.rjax({
            url: '/other/addCount/' + id,
            type: 'post'
        })
    }

    phoneChange(e) {
        this.setState({
            tellphone: e.target.value
        })
    }

    codeChange(e) {
        this.setState({
            code: e.target.value
        })
    }

    async beforeSubmit() {
        for (let item of this.valids) {
            if (!item.func(this.state[item.key])) {
                return;
            }
        }
        // productType: 0 zed   productType: 1 其他产品  productType: 2：荣勋产品
        let sendobj = {
            phone: this.state.tellphone,
            code: this.state.code,
        }
        var id = util.getQuery().id
        let res = await util.rjax({
            url: '/otherProductUser/type/' + sendobj.phone + "?code=" + sendobj.code + "&id=" + id,
            type: "get"
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
            this.setState({
                second: 0,
            })

        })
        if (res) {
            if (res.data === 0) {//该手机号判定为用户
                jquery('.submitdialog').show()
                this.setState({ tellphone: '' })
                this.setState({ code: '' })
                this.setState({ second: 0 })
            } else if (res.data === 1) {//该手机号判定为销售
                window.location.href = `./declaration.html?id=` + util.getQuery().id + "&phone=" + this.state.tellphone;
            }
        }

    }

    async beforeSendCode() {
        if (this.state.second !== 0) { return }
        if (this.state.tellphone.length < 11) {
            jquery(".errormsg").html("手机格式错误")
            return
        } else {
            jquery(".errormsg").empty()
        }

        this.setState({
            second: 60
        });

        let time = setInterval(() => {
            if (this.state.second < 1) {
                clearInterval(time)
            } else {
                this.setState({
                    second: this.state.second - 1
                })
            }
        }, 1000)

        let phone = this.state.tellphone
        let res = await axios.get(`${util.host}/auth/code/sms`, {
            params: {
                deviceId: phone,
                phone: phone
            }
        })

        if (res.data.success) {
            jquery(".errormsg").html("验证码发送成功")
        } else {
            jquery(".errormsg").html("手机号码格式错误")
        }

    }

    async submitSuccess() {
        jquery('.submitdialog').hide()
    }

    render() {
        return (
            <div>
                <div id="largeloandet">
                    <div className="head">
                        <h4>{this.state.prodetail.title}产品</h4>
                        {/* <p className="loantit">多套最高可贷款额度（元）</p> */}
                        <p className="loanval">{this.state.prodetail.loanDetail}</p>
                        <p>
                            <span className="left"><i>{this.state.prodetail.rate}</i></span>
                            <span className="right"><i>{this.state.prodetail.loanLimit}</i></span>
                        </p>
                        <p>
                            <span className="left">{this.state.prodetail.summary}</span>
                            <span className="right"><i>{this.state.prodetail.fee}</i></span>
                        </p>
                    </div>

                    <div className="inputbox">
                        <p className="t">急用钱 上岸首选</p>
                        <p className="d">让每一个人都能借到钱</p>
                        <p className="loannum">{this.state.prodetail.count}人已下款</p>
                        <input className="tellphone" value={this.state.tellphone} type="text" placeholder="请输入手机号" onChange={this.phoneChange.bind(this)} maxLength="11" />
                        <div className="code">
                            <input className="vercode" value={this.state.code} placeholder="请输入验证码" onChange={this.codeChange.bind(this)} type="text" />
                            <input className="codebtn" type="button" onClick={this.beforeSendCode.bind(this)} value={(this.state.second === 0) ? '验证码' : `剩余${this.state.second}秒`} />
                        </div>
                        <span className="errormsg"></span>
                        <input className="loanbtn" onClick={this.beforeSubmit.bind(this)} type="button" value="立即下款" />
                        <p className="tip"> 一对一服务&nbsp;&nbsp;&gt;&nbsp;&nbsp;成功下款</p>
                    </div>

                    <div className="toggle">
                        <p className="title ">申请资格</p>
                        <img className="requeri" src={this.state.prodetail.applyRequire} alt="" />
                    </div>

                    <div className="submitdialog">
                        <div className="dialogbox">
                            <span className="mt10">尊敬的客户，您的下款申请已成功提交，客服将尽快联系您。</span>
                            <button onClick={this.submitSuccess.bind(this)}>确定</button>
                        </div>
                    </div>
                </div>
            </div >
        )
    }
}
ReactDom.render(<Largeloandet />, document.getElementById("app"));